<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">

	<div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="formId">
					<div class="select-list">
						<ul>
							<li>会员查询：<input type="text" placeholder="请输入会员姓名或者联系电话"
								name="vipName" />
							</li>
							<li>会员类型：<select name="tovipId" id='orgid'>

							</select></li>
							<li>会员卡状态：<select name="vipState" id='vipState'>
									<option value="">所有</option>
									<option value="1">有效卡</option>
									<option value="2">已过期</option>
							</select></li>

							<li><a class="btn btn-primary btn-rounded btn-sm"
								onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
								<a class="btn btn-warning btn-rounded btn-sm"
								onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>

							</li>
						</ul>
					</div>
				</form>
			</div>

			<div class="btn-group-sm hidden-xs" id="toolbar" role="group">
				<a class="btn btn-success" onclick="$.operate.add()"> <i
					class="fa fa-plus"></i> 添加
				</a> <a class="btn btn-primary btn-edit disabled"
					onclick="$.operate.edit()"> <i class="fa fa-edit"></i> 修改
				</a>
				 <a class="btn btn-primary btn-edit disabled"
					onclick="$.operate.recharge()"> <i class="fa fa-edit"></i> 充值
				</a>
				<a class="btn btn-danger btn-del btn-del disabled"
					onclick="$.operate.removeAll()"> <i class="fa fa-remove"></i>
					删除
				</a> <a class="btn btn-warning" onclick="$.table.exportExcel()"> <i
					class="fa fa-download"></i> 导出
				</a>
			</div>
			<div class="col-sm-12 select-table table-striped">
				<table id="bootstrap-table" data-mobile-responsive="true"></table>
			</div>
		</div>
	</div>
	<div th:include="include :: footer"></div>
	<script th:inline="javascript">
	
	function recharge(id){
/*  		var  href = '/vip/recharge?id=' + id + ''; 
        self.parent.addTabs({id: 'null', title: '会员卡充值', close: true, url: href}); */

        var url = "/404.html";
        if ($.common.isNotEmpty(id)) {
            url = $.table._option.rechargeUrl.replace("{id}", id);
        } else {
            var id = $.common.isEmpty($.table._option.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns($.table._option.uniqueId);
            if (id.length == 0) {
                $.modal.alertWarning("请至少选择一条记录");
                return;
            }
            url = $.table._option.rechargeUrl.replace("{id}", id);
        }
        $.modal.open("会员卡充值", url);
	} 
	
	
	
	
		$(function() {
			var options = {
				method : "get",
				url : "vip/list",
				createUrl : "/vip/add",
				updateUrl : "/vip/edit/{id}",
				rechargeUrl : "/vip/recharge/{id}",
				removeUrl : "/vip/remove",
				/* exportUrl: prefix + "/export",  */
				modalName : "会员管理",
				search : false,
				showExport : true,
				columns : [
						{
							checkbox : true
						},
						{
							field : 'vipId',
							title : '序号',
							visible : false
						},
						{
							field : 'tovip.tovipName',
							title : '会员类型',
							sortable : true
						},
						{
							field : 'vipName',
							title : '姓名',
							sortable : true
						},
						{
							field : 'vipTel',
							title : '电话号码',
							sortable : true
						},
						{
							field : 'vipMfg',
							title : '购买日期',
							sortable : true
						},
						{
							field : 'vipExp',
							title : '截止日期',
							sortable : true
						},
						{
							field : 'vipState',
							title : '状态',
		                    formatter: function (value) {
		                        switch(value){
		                          case 1:
		                              return '有效卡'
		                          case 2:
		                              return '<font color="#FF0000">已过期</font>'
		                       }
		                       }
						},
						{
							field : 'vipAccount',
							title : '余额'
						},

						{
							title : '操作',
							align : 'center',
				            formatter: function(value, row, index) {
				            	var actions = [];
				            	 actions.push('<a class="btn btn-info btn-xs" href="#" onclick="recharge('+row.vipId+')"><i class="fa fa-eye"></i>充值</a> ');
				            	actions.push('<a class="btn btn-success btn-xs ' + '' + '" href="#" onclick="$.operate.edit(\'' + row.vipId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
		                        actions.push('<a class="btn btn-danger btn-xs ' + '' + '" href="#" onclick="$.operate.remove(\'' + row.vipId + '\')"><i class="fa fa-remove"></i>删除</a>');
								return actions.join('');
				            }

						} ]
			};     
			//展示会员类型名称
			tovipName();
			function tovipName() {
				$.ajax({
							type : "post",
							url : "/vip/selectTovipName",
							dataType : "json",
							success : function(res) {
								if (null != res) {
									var html = '  <option value="">所有</option>';
									Object.keys(res).forEach(function(key) {
									html += '<option value="' + res[key].tovipId + '" class="choice">'
											+ res[key].tovipName+ '</option>';
													});
									$('#orgid').html(html);

								}
							}
						});
			}
			
			$('select#orgid').change(function() {$.table.search();});
			$('select#vipState').change(function() {$.table.search();});
			$.table.init(options);
		});



	</script>
</body>
</html>